<template>
  <el-row class="ul-list">
    <el-skeleton :animated="true" :loading="title_loading" :rows="0" :throttle="200">
      <template slot="template">
        <el-col :xs="24" :sm="12" :md="12" :lg="24" class="ul-list-item" v-for="(item,index) in 10"  :key="index">
          <div class="overflow_omit">
            <el-skeleton-item variant="p" style="width: 10%" />
            <el-skeleton-item variant="p" style="width: 85%" />
          </div>
        </el-col>
      </template>
      <template>
        <el-tooltip effect="dark" content="查看" placement="right" v-for="(item,index) in linksList"  :key="index">
          <el-col :xs="24" :sm="12" :md="12" :lg="24" class="ul-list-item pointer fs-14">
            <nuxt-link :to="'/read/' + item.id">
              <div class="overflow_omit">
                <span class="indexNumber">{{ index + 1 }}</span>
                {{ item.webName }}
              </div>
            </nuxt-link>
          </el-col>
        </el-tooltip>
        <el-col :span="24" v-if="linksList.length === 0">
          <el-empty :image-size="200" description="暂无数据"></el-empty>
        </el-col>
      </template>
    </el-skeleton>
  </el-row>
</template>

<script>
export default {
  data(){
    return{
      title_loading: true,
      linksList: []
    }
  },
  mounted() {
    this.$api_links.getRandomList(10).then(res => {
      if(res.code === 200){
        this.title_loading = false;
        this.linksList = res.data;
      }
    });
  }
}
</script>

<style scoped>
.ul-list{
  margin-top: -5px;
}
.ul-list-item{
  margin-top: 5px;
}
.ul-list-item:nth-child(1) .indexNumber{
  color: #FFFFFF;
  background-color: #C0392B;
}
.ul-list-item:nth-child(2) .indexNumber{
  color: #FFFFFF;
  background-color: #E67E22;
}
.ul-list-item:nth-child(3) .indexNumber{
  color: #FFFFFF;
  background-color: #F39C12;
}
.indexNumber{
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  background-color: rgba(124,124,124,.3);
  text-align: center;
  font-size: 12px;
  border-radius: 4px;
}
</style>
